<template>

  <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item>
          <el-input v-model="formInline.XSDocumentNumber" placeholder="销售订单号" clearable />
      </el-form-item>
      <el-form-item>
          <el-input v-model="formInline.FHDocumentNumber" placeholder="单据编码" clearable />
      </el-form-item>
      <el-form-item>
        <el-input v-model="formInline.CustomerProfileName" placeholder="客户名称" clearable />
      </el-form-item>
      <el-form-item>
          <el-input v-model="formInline.SalesStaff" placeholder="销售员" clearable />
      </el-form-item>
      <el-form-item>
          <el-input v-model="formInline.ItemName" placeholder="物料名称" clearable />
      </el-form-item>
      <el-form-item>
        <el-date-picker
        v-model="formInline.aaa"
        type="date"
        placeholder="开始时间"
      />-
      <el-date-picker
        v-model="formInline.bbb"
        type="date"
        placeholder="结束时间"
      />
      </el-form-item>
      <el-form-item>
          <!-- <el-button type="primary">搜索</el-button> -->
          <el-button type="primary" :icon="Search" @click="GetSuppliers()">搜索</el-button>
      </el-form-item>
      

  </el-form>
  <el-button type="primary" :icon="Plus" plain @click="router.push('/SalesOrder/DeliverynoticeAdd')">新增</el-button>
  <el-button type="primary" @click="GetOut()" :icon="Download">导出</el-button>
  
  <el-col :span="2">
    <el-upload
        ref="fileInput"
        class="upload-demo"
        action="http://localhost:5020/api/SalesManagementWrite/ImportHandle"
        :show-file-list="false"
        :on-success="AddExcelData"
      >
      <el-button type="primary" :icon="Upload">导入发货数据</el-button>
      </el-upload>
  </el-col>



  

  <el-empty description="暂无数据" v-show="suppliers.length == 0" />
  <el-table :data="suppliers" stripe style="width: 100%" v-show="suppliers.length != 0">
      <el-table-column prop="shippingnoteId" label="序号" />
      <el-table-column prop="xsDocumentNumber" label="销售订单号" />
      <el-table-column prop="salesStaff" label="销售员" />
      <el-table-column prop="fhDocumentNumber" label="单据编码" >
        <template v-slot="scope">
          <a @click="tiaozhuan(scope.row.shippingnoteId)">{{ scope.row.fhDocumentNumber }}</a>

        </template>
      </el-table-column>
      <el-table-column prop="salesStaff" label="单据状态" />
      <el-table-column prop="customerProfileName" label="客户名称" />
      <el-table-column prop="materialName" label="物料名称" />
      <el-table-column prop="itemBianma" label="物料编码" />
      <el-table-column prop="numberpack" label="发货数量" />
      <el-table-column prop="numberpack" label="出库数量" />
      <el-table-column prop="handlingcharges" label="件数" />
      <el-table-column prop="deliverydate" label="单据日期">
        <template v-slot="scope">
          {{ scope.row.deliverydate.substr(0,10)}}
        </template>
      </el-table-column>
  </el-table>

  <div>
      <tr>
          <td>
              <el-pagination v-model:current-page="formInline.PageIndex" v-model:page-size="formInline.PageSize"
                  :page-sizes="[10, 20, 30, 40, 50]" :background="true" layout="total, slot, prev, pager, next"
                  :total="formInline.totalCount" @size-change="handleSizeChange"
                  @current-change="handleCurrentChange">
              </el-pagination>
          </td>
          <td>
              <el-pagination v-model:current-page="formInline.PageIndex" v-model:page-size="formInline.PageSize"
                  :page-sizes="[10, 20, 30, 40, 50]" :background="true" layout="slot, sizes, jumper"
                  :total="formInline.totalCount" @size-change="handleSizeChange"
                  @current-change="handleCurrentChange">
              </el-pagination>
          </td>
      </tr>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { Delete, Edit, Search, Share } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRoute } from 'vue-router'
import axios from 'axios';
import { Plus, Download, Upload, List } from '@element-plus/icons-vue'
import type { TabsPaneContext,UploadInstance, UploadProps  } from 'element-plus'
const router = useRouter()
const route = useRoute()
const apiurls = import.meta.env.VITE_APP_API_URL_SalesManagementCommon;
onMounted(() => {
  GetSuppliers()
});
const bpiurls = import.meta.env.VITE_APP_API_URL_BasicInformationCommon;//5176
const cpiurls = import.meta.env.VITE_APP_API_URL_SalesManagementCommon;//5227


const formInline = reactive({
  XSDocumentNumber: '',
  FHDocumentNumber: '',
  CustomerProfileName: '',
  SalesStaff: '',
  ItemName:'',
  PageIndex: 1,
  PageSize: 10,
  pageCount: 0,
  totalCount: 0,
  aaa:'',
  bbb:''
})

//导入相关
const AddExcelData: UploadProps['onSuccess']=(
  response:any
  
)=>{
  if(response!=null)
  {
    ElMessage.success("导入成功");
    GetSuppliers()
  }
  else
  {
    ElMessage.error("导入失败");
  }
}

//导出
const GetOut = ()=>{
  location.href=cpiurls+'/api/Shipping/ShoppingExcelHandle';
}

const tiaozhuan=(shippingnoteId:any)=>{
  router.push({
    path:'/SalesOrder/DeliverynoticeEditView',
    query:{
      shippingnoteId:shippingnoteId
    }
  })
}


const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
//销售订单单据列表
const suppliers: any = ref([]);
const GetSuppliers = () => {
  axios.get(apiurls+'/api/Shipping/ShippingnoteShowHandle',
          {
              params: {
                XSDocumentNumber: formInline.XSDocumentNumber,
                FHDocumentNumber: formInline.FHDocumentNumber,
                CustomerProfileName: formInline.CustomerProfileName,
                SalesStaff: formInline.SalesStaff,
                ItemName: formInline.ItemName,
                PageIndex: formInline.PageIndex,
                PageSize: formInline.PageSize,
              }
          }
      )
      .then((res) => {
          console.log(res.data.data);
          suppliers.value = res.data.data;
          formInline.pageCount = res.data.pageCount;
          formInline.totalCount = res.data.totalCount;
      })
      .catch((err) => {
          console.log(err);
      });
};

//分页
const handleSizeChange = (val: number) => {
  formInline.PageSize = val
  GetSuppliers()
}
const handleCurrentChange = (val: number) => {
  formInline.PageIndex = val
  GetSuppliers()
}



const formLabelWidth = '140px'

</script>

<style>
.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>